<template>
  <div id="app">
    <el-tabs type="border-card" v-model="editableTabsValue"  @tab-remove="removeTab">

      <el-tab-pane label="美食管理" name="1">

        <div class="el-select">
            <el-select v-model="selectvalue1" filterable placeholder="请选择难度等级">
              <el-option
                v-for="item in options1"
                :key="item.selectvalue"
                :label="item.label"
                :value="item.selectvalue">
              </el-option>
            </el-select>

            <el-select v-model="selectvalue2" filterable placeholder="请选择味道等级">
              <el-option
                v-for="item in options2"
                :key="item.selectvalue"
                :label="item.label"
                :value="item.selectvalue">
              </el-option>
            </el-select>

          <div class="el-select">
            <el-input v-model="seachinput" placeholder="请输入菜品名称"></el-input>
          </div>

          <div class="el-select">
            <el-button @click="search">搜索</el-button>
          </div>
        </div>

        <el-table
          :data="cookdata"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="name"
            label="菜品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="username"
            label="发表人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="发布时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="needTime"
            label="制作时间(分钟)"
            width="120">
          </el-table-column>
          <el-table-column
            prop="levelId"
            label="难度等级"
            width="170">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.levelId"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column
            prop="tasteId"
            label="味道"
            width="170">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.tasteId"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column
            prop="categorynaem"
            label="分类"
            width="150">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="handleClickdel(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total=pages
          :page-size=pager
          :current-page=page
          class="el-pagination">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane
        :key="item.name"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
        :closable=true
      >
        <el-form ref="form" label-width="8rem" class="el-form">
          <div style="display: flex;justify-content: center;padding-right:10rem;"> 
            <el-image
              style="width: 10rem; height: 10rem"
              :src='`${publicPath}${item.content.pic}`'
            ></el-image>
          </div>
          <div class="relation-item">菜名:  <div style="float: right; padding-right:10rem;">{{item.content.name}}</div></div>
          <div class="relation-item">发布人:  <div style="float: right; padding-right:10rem;">{{item.content.username}}</div></div>
          <div class="relation-item">分类:  <div style="float: right; padding-right:10rem;">{{item.content.categorynaem}}</div></div>
          <div class="relation-item">发布时间:  <div style="float: right; padding-right:10rem;">{{item.content.createdAt}}</div></div>
          <div class="relation-item">美食介绍:  <div style="float: right; padding-right:10rem;">{{item.content.description}}</div></div>
          <div class="relation-item" style="padding-top:0.5rem; padding-bottom:0.5rem;">主要食材:  <div style="float: right; padding-right:10rem;">{{item.content.ingredients}}</div></div>
          <div class="relation-item">难度等级:  <div style="float: right; padding-right:10rem;">
            <el-rate
                v-model="item.content.levelId"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate></div>
          </div>
          <div class="relation-item">味道等级:  <div style="float: right; padding-right:10rem;">
            <el-rate
                v-model="item.content.tasteId"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate></div>
          </div>
          <div class="relation-item">制作时间:  <div style="float: right; padding-right:10rem;">{{item.content.needTime}}分钟</div></div>

        </el-form>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<style>
  .el-select {
    float: left;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-pagination {
    text-align:center
  }

  .cell {
    text-align:center
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      value: 5,
      seachinput: '',

      cookdata: [],
      pages: 50,
      page: 1,
      pager: 10,

      publicPath: process.env.BASE_URL,

      editableTabs: [],
      editableTabsValue: '1',
      tabIndex: 2,

      options1: [{
        selectvalue: '1',
        label: '非常容易'
      }, {
        selectvalue: '2',
        label: '容易'
      }, {
        selectvalue: '3',
        label: '正常'
      }, {
        selectvalue: '4',
        label: '困难'
      }, {
        selectvalue: '5',
        label: '非常困难'
      }, {
        selectvalue: '',
        label: ''
      }],
      selectvalue1: '',

      options2: [{
        selectvalue: '1',
        label: '一般'
      }, {
        selectvalue: '2',
        label: '可口'
      }, {
        selectvalue: '3',
        label: '好吃'
      }, {
        selectvalue: '4',
        label: '美味'
      }, {
        selectvalue: '5',
        label: '佳肴'
      }, {
        selectvalue: '',
        label: ''
      }],
      selectvalue2: '',

    }
  },

  created() {
    this.seeuser();
  },

  methods: {
    search() {
      this.seeuser(1, this.selectvalue1, this.selectvalue2, this.seachinput);
    },

    handleClick(val) {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: '查看美食信息',
        name: newTabName,
        content: val
      });
      this.editableTabsValue = newTabName;
    },

    async seeuser(page, a1, a2, a3) {
      this.page = page;
      let {data} = await axios( {
        method: 'get',
        url: '/api/admin/food',
        params: {
          page,
          a1,
          a2,
          a3
        }
      });
      
      this.cookdata = data.data;
      this.pages = data.prepage;
    },

    handleCurrentChange(val) {
      this.seeuser(val, this.selectvalue1, this.selectvalue2, this.seachinput);
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex%4 == 1) {
        return 'warning-row';
      } else if (rowIndex%4 == 3) {
        return 'success-row';
      }
      return '';
    },

    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      
      this.editableTabsValue = '1';
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },

    async handleClickdel(id) {
      let {data} = await axios({
        method: 'post',
        url: '/api/admin/food/del',
        data: {
          id
        }
      });

      if(data.code){
        this.$message.error(data.message);
      }else{
        this.seeuser();
        this.$message({
          message: data.message,
          type: 'success'
        });
      }
    }

  }
}
</script>
